<template>
	<view>
		<view class="image-list" v-if="imgList.length > 0">
			<template v-for="(item,index) in imgList">
				<view class="image-box">
					<image @click="previewImage" class="img-sy" :src="item" :key="index"></image>
					<m-icon @click="itemClick(index)" size="48" color="#999999" type="icon-shanchu1" />
				</view>
			</template>
			<view v-if="imgList.length<length" @click="addPhoto" class="feedback_img flex-column ai-center jc-center">
				<m-icon size="48" color="#999999" type="icon-xiangji"></m-icon>
				<view class="add-btn">添加照片</view>
			</view>
		</view>
		<view v-else @click="addPhoto" class="feedback_img flex-column jc-center ai-center">
			<m-icon size="48" spa="0 0 20 0" color="#999999" type="icon-xiangji"></m-icon>
			<view class="ta-center">{{placeholder}}</view>
		</view>
	</view>
</template>

<script>
	import { Upload } from '@/api/Ctrls.js'
	import { Toast } from '@/utils/tools.js'
	export default {
		name: "uploadPhoto",
		data() {
			return {
				imgList: []
			};
		},

		props: {
			value: {
				type: [Array, Object],
				default: () => [],
			},
			// 可上传图片张数 默认4张
			length: {
				type: [String, Number],
				default: () => {
					return 4
				}
			},
			// 说明提示
			placeholder: {
				type: String,
				default: () => {
					return '添加照片(选填)'
				}
			}
		},
		methods: {
			initData() {
				this.imgList = []
			},
			// 预览大图
			previewImage() {
				uni.previewImage({
					urls: this.imgList,
				});
			},
			async addPhoto(type) {
				if (this.imgList.length == 4) return Toast("最多允许添加4张图片");
				const { tempFilePaths } = await this.chooseImage();
				this.$emit("setImg", '111')
				console.log('tempFilePaths', tempFilePaths)
				uni.showLoading();
				const { success, data, msg } = await Upload(tempFilePaths[0]);
				console.log('success, data,msg===', success, data, msg)
				if (success) {
					this.imgList.push(data);
					console.log('this.imgList', this.imgList)
					this.$emit("input", this.imgList)
				}
				uni.hideLoading()

				// let that = this;
				// if (this.imgList.length == 4) {
				// 	Toast("最多允许添加4张图片");
				// 	return;
				// }
				// uni.chooseImage({
				// 	count: 1, //默认9
				// 	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				// 	sourceType: type == 1 ? ['camera'] : ['album'], //从相册选择
				// 	success: async function({ tempFilePaths, tempFiles }) {
				// 		uni.showLoading();
				// 		tempFiles[0].FileName = tempFiles[0]['name'];
				// 		console.log('tempFilePaths[0]',tempFilePaths[0])
				// 		const { success, data } = await Upload(tempFilePaths[0]);
				// 		console.log('success, data===', success, data)
				// 		if (success) {
				// 				that.imgList.push(data);
				// 				console.log('that.imgList===>',that.imgList)
				// 				that.$emit("setImg", '2222')
				// 				console.log('111')
				// 				// that.$emit("input", that.imgList)
				// 		}
				// 		uni.hideLoading()
				// 	}
				// });

			},

			itemClick(index) {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确定删除这张图片？',
					success: (res) => {
						if (res.confirm) {
							that.imgList.splice(index, 1);
						} else if (res.cancel) {
							console.log('点击了取消')
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.image-list {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 30rpx;

		.image-box {
			position: relative;
			height: 194rpx;

			.img-sy {
				display: block;
				position: relative;
				float: left;
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}

			.mIcon {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
			}
		}
	}

	.feedback_img {
		background: #F6F6F6;
		border-radius: 24rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		width: 100%;
		height: 194rpx;
	}
</style>